/**
 个人报名
*/
<style lang="scss" scoped>
.operate-exam-container ::v-deep {
    .el-breadcrumb__item:last-child ::v-deep {
        .el-breadcrumb__inner {
            color: #606266;
            font-weight: bold;
            cursor: default;
        }
    }
    .el-breadcrumb__item ::v-deep {
        .is-link {
            color: #aaa;
            font-weight: unset;
        }
        .is-link:hover {
            color: #409eff;
        }
    }
    .exam-form {
        padding-right: 10px;
    }
    .exam-form ::v-deep {
        .el-date-editor.el-input {
            width: 100% !important;
        }
        .editor-custom-btn-container {
            display: none;
        }
        .tinymce-container {
            margin: 0 !important;
        }
    }
    .title {
        font-size: 18px;
    }
    .el-divider--horizontal {
        margin: 10px 0 20px 0 !important;
    }
    .operate-btn-container {
        border-top: 1px solid #ebeef5;
        padding: 20px;
        margin-bottom: 30px;
    }
    .row-bg {
        margin: 30px 0 30px 0;
    }
}
</style>
<template>
    <div class="operate-exam-container" v-if="indexKey === 1">
        <div style="height: 30px">
            <el-breadcrumb style="float: left" separator="/">
                <el-breadcrumb-item :to="{ path: '/examinationRegistration' }">
                    <span @click="reback()">{{ $t('竞赛报名') }}</span>
                </el-breadcrumb-item>
                <el-breadcrumb-item>{{ '个人报名' }}</el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <el-card
            style="padding: 0 !important"
            shadow="never"
            v-loading="loading"
            body-style="padding: 24px;"
        >
            <el-row type="flex" class="row-bg" justify="space-between">
                <h2 style="color: #101010; font-weight: bold">{{ $t('个人报名') }}</h2>
                <el-button @click="reback">{{ $t('requirement.back') }}</el-button>
            </el-row>
            <hr style="border-top: 2px solid #eee" />
            <div class="box">
                <el-row>
                    <el-form ref="form" :model="form">
                        <div>
                            <h1 style="color: #101010; font-weight: bold; text-align: center">
                                {{ dataList.projectName }}
                            </h1>
                        </div>

                        <div v-html="dataList.comment"></div>
                        <el-row type="flex" class="row-bg" justify="center">
                            <el-button type="primary" @click="signUp">
                                {{ $t('我要报名') }}
                            </el-button>
                        </el-row>
                    </el-form>
                </el-row>
            </div>
        </el-card>
        <el-dialog
            @close="dataObjit = {}"
            :before-close="beforeClose"
            :title="titleList"
            width="40%"
            :visible.sync="addflag"
            :show-close="beforeClose"
            :close-on-click-modal="false"
            :close-on-press-escape="false"
        >
            <individualRegistrationSignUp
                @change-exam="changeExam"
                ref="addform"
                v-if="addflag"
                @cancel-dialog="changeClose"
                :dataQueryForm="dataQueryForm"
                :showFlag="addflag"
                :dataSignUp="dataList"
                @close="
                    (flag) => {
                        addflag = flag
                    }
                "
                @affirm-form="addrmForm"
            ></individualRegistrationSignUp>
        </el-dialog>
    </div>
</template>
<script>
import { queryDic } from 'common/src/api/dictionary'
import UTILS from 'common/src/utils/utils'
import interAcaConferenceApi from 'common/src/api/internationalCommunication/interAcaConference'
import { findTeacherInfoList } from 'common/src/api/studentinfo'
import comRegistration from 'common/src/api/competitionRegistration/comRegistration'
import individualRegistrationSignUp from 'common/src/views/competitionRegistration/competition/individualRegistrationSignUp'

export default {
    components: {
        individualRegistrationSignUp,
    },
    props: {
        compile: {
            type: String,
            default: '',
        },
        dataList: {
            type: Object,
        },
    },
    data() {
        return {
            indexKey: 1, // 面包屑
            pickerOptionsStart: {
                disabledDate: (time) => {
                    let endDateVal = this.queryForm.forumEndTime
                    if (endDateVal) {
                        return time.getTime() >= new Date(endDateVal).getTime()
                    }
                },
            },
            pickerOptionsEnd: {
                disabledDate: (time) => {
                    let beginDateVal = this.queryForm.forumStartTime
                    if (beginDateVal) {
                        return time.getTime() <= new Date(beginDateVal).getTime() - 86400000
                    }
                },
            },
            addflag: false,

            queryForm: {
                teacherId: null,
                teacherName: '',
                faculty: '',
                title: '',
                phoneNumber: '',
            },
            formData: {
                name: '',
            },
            dataSignUp: {},
            dataQueryForm: {},
            options: {
                englisNameSchool: [],
                nameSchool: [],
                approver: [],
                studentList: [],
                regionList: [],
                oneSubjects: [],
            },
            rulesForm: {
                teacherId: [{ required: true, message: this.$t('请输入工号'), trigger: 'change' }],
                forumStartTime: [
                    {
                        required: true,
                        message: this.$t('interdisciplinaryManagement.pleaseChoose'),
                        trigger: 'blur',
                    },
                ],
                forumEndTime: [
                    {
                        required: true,
                        message: this.$t('interdisciplinaryManagement.pleaseChoose'),
                        trigger: 'blur',
                    },
                ],
                studentId: [
                    {
                        required: true,
                        message: this.$t('interdisciplinaryManagement.pleaseChoose'),
                        trigger: 'change',
                    },
                ],
                cooperativeUniversity: [
                    { required: true, message: this.$t('请输入外方合作高校'), trigger: 'change' },
                ],
                country: [
                    {
                        required: true,
                        message: this.$t('请输入论坛举办国家地区'),
                        trigger: 'change',
                    },
                ],
                oneSubject: [
                    {
                        required: true,
                        message: this.$t('请输入项目涉及一级学科'),
                        trigger: 'change',
                    },
                ],
                projectNumber: [
                    { required: true, message: this.$t('请输入项目编号'), trigger: 'blur' },
                ],

                projectName: [
                    {
                        required: true,
                        message: this.$t('请输入项目名称'),
                        trigger: 'change',
                    },
                ],
            },
        }
    },
    created() {
        // this.getList(this.formData)
    },
    mounted() {
        this.getOptions()

    },
    methods: {
        getOptions() {
            // 筛选条件字典查询
            let data = {
                lang: this.$store.getters.language || 'cn',
                type: 'allChild',
                keys: ['profession', 'G_XBIE', 'G_GJQU'],
            }
            queryDic(data).then((res) => {
                UTILS.fillSelect(
                    {
                        title: 'profession',
                        sex: 'G_XBIE',
                        nationId: 'G_GJQU', // 国别/地区
                    },
                    res.data,
                    this.options
                )
            })
        },

        // 返回主页
        changeExam(val) {
            this.addflag = false
            this.$emit('change-pre-exam',1)
        },
        postApproveAgree(date) {
            interAcaConferenceApi.overseasCollege(date).then((res) => {
                if (res.data.list.length > 0) {
                    res.data.list.forEach((el) => {
                        this.options.nameSchool.push({
                            value: el.id,
                            label: el.collegeName,
                            nationName: el.nationName,
                        })
                        this.options.englisNameSchool.push({
                            value: el.id,
                            label: el.collegeNameEn,
                            nationName: el.nationName,
                        })
                    })
                }
            })
        },
        loadmore() {
            this.getList(this.formData)
        },
        dataFilter(val) {
            this.options.oneSubjects = []
            this.formData.name = val
            this.getList(this.formData)
        },
        getList(formData) {
            forumProject.getOneSubject(formData).then((res) => {
                if (res && res.code == 200) {
                    this.options.oneSubjects = res.data
                }
            })
        },

        reback() {
            this.$emit('change-pre-exam')
        },

        cancelClose() {
            this.$refs['addform'].resetFields()
        },
        // 报名
        signUp() {
            this.titleList = this.$t('报名信息确认')
            this.dataQueryForm = this.queryForm
            this.addflag = true

        },
        // 取消
        changeClose(param) {
            this.addflag = param
        },
    },
}
</script>
